<!-- appvue[ -->
<template>
  <div class="app">
    <Dialog />
  </div>
</template>
<script setup>
import Dialog from "@/components/Dialog.vue";
const car = reactive({
  name: "宝马",
  model: "328",
  price: 30,
  color: "白色",
});
</script>

<style lang="less" scoped>
.app {
  width: 1000px;
  height: 800px;
  border: 1px dashed black;
  margin: 0 auto;
  padding: 0;
}
</style>
<!-- appvue] -->

<!-- Dialogvue[ -->
<template>
  <div>
    <button type="button" @click="isShow = true">点我显示弹窗</button>
    <teleport to="#app">
      <!--这里可以传送到html的任意位置配合CSS的class选择器实现弹窗的定位。 -->
      <div v-if="isShow" class="mask">
        <div class="dialog">
          <h3>我是内容</h3>
          <h3>我是内容</h3>
          <h3>我是内容</h3>
          <h3>我是弹窗内容</h3>
          <button type="button" @click="isShow = false">点我关闭弹窗</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script setup>
import { ref } from "vue";
let isShow = ref(false);
</script>

<style lang="less" scoped>
.dialog {
  width: 300px;
  height: 400px;
  background: red;
  margin: 200px auto 0 auto;
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}
</style>

<!-- Dialogvue] -->
